import React, { memo, useEffect, useState } from "react"
import Activity from "../../assets/image/activity.jpg"
import { useLocation } from "react-router"
import { useAppSelector } from "../../redux"
import { getBookMyName } from "../../request/bookInfo/getBookByName"
import Header from "../../components/home/header"
import { addShoppingApi } from "../../request/shoppingCar/addShopping"




const BookInformation:React.FC = memo(()=>{
    // 仓库获取书籍信息
    const bookinfo = useAppSelector(state=>state.book.bookInfo)
    const [bookName,setBookName] = useState({})
    // 获取参数书籍id
    const location = useLocation();
    const Id = location.state?.id
    // 获取书籍名称
    const bookname = location.state?.bookname
    
    // 通过id查询书籍
    useEffect(()=>{
        if(typeof Id != "undefined"){
            // 根据id查询书籍
            bookinfo.map((item)=>{
                if (Id===item.id){
                    setBookName(item)
                    return null
                 } 
                return null
            })
        }
    },[setBookName,Id,bookinfo])

    // 通过名称查询书籍
    useEffect(()=>{
        if(typeof bookname!="undefined"){
            getBookMyName(bookname)
            .then(result=>{
                console.log(result)
                setBookName(result as string)
            })
        }
    },[])

    const {book_name,book_public,book_profile,img_url,book_writer,book_count,book_price,id}:any = bookName
    const newimg_url = "http://localhost:8080/BookService/"+img_url

    // 加入购物车
    const addShopping = ()=>{
        addShoppingApi(book_name,id)
    }






  

    return (
        <main>
            <Header/>
            {/* 横幅 */}
            <div className="w-3/4 h-14 ml-40 mt-3">
                <img src={Activity} alt="" />
            </div>
            {/* 书籍详细 */}
            <div className="w-full min-h-96 px-4 pt-6 inline-flex justify-center">
                <div className="mr-2 w-48 h-60 mt-9">
                    <img src={newimg_url} alt="" className="min-w-48 h-60" />
                </div>
                <div className="w-2/3 h-96 bg-stone-200 p-9 shadow-xl">
                    <h1 className="text-4xl">{book_name}</h1>
                    <h2 className="mt-3">
                        <span className="text-xl">{book_profile}</span>
                    </h2>
                    <div className="my-3">
                        <span className="mr-4">作者：{book_writer}</span>
                        <span>出版社：{book_public}</span>
                    </div>
                    <div className="mb-3"><span>库存：{book_count}</span></div>
                    <div className="text-2xl mt-6"><span className="text-sm mr-1.5">$</span>{book_price}</div>
                    <div className="mt-6">
                        <span className="mr-4 inline-block w-24 h-9 bg-blue-500 rounded-lg text-white place-content-center pl-3">立即购买</span>
                        <span className="inline-block w-24 h-9 bg-blue-500 text-white rounded-lg place-content-center pl-2" onClick={()=>addShopping()}>加入购物车</span>
                    </div>
                </div>
            </div>
        </main>
    )
})

export default BookInformation